<template>
	<view class="my-container">
		<!-- 未登录状态 -->
		<view class="no-login-container" v-if="!token">
			<uni-icons type="contact-filled" size="100" color="gray"></uni-icons>
			<button size="default" class="login-btn" open-type="getUserInfo" @click="getUserInfo">一键登录</button>
			<text class="tip">登录后尽享更多权益</text>
		</view>
		<!-- 登录状态 -->
		<view v-else class="login-container">
			<view class="header">
				<image :src="userInfo.avatarUrl"></image>
				<view class="name">{{userInfo.nickName}}</view>
			</view>
			<!-- 面板的列表区域 -->
			<view class="panel-list">
				<!-- 第一个面板 -->
				<view class="panel">
					<!-- panel 的主体区域 -->
					<view class="panel-body">
						<!-- panel 的 item 项 -->
						<view class="panel-item">
							<text>8</text>
							<text>收藏的店铺</text>
						</view>
						<view class="panel-item">
							<text>14</text>
							<text>收藏的商品</text>
						</view>
						<view class="panel-item">
							<text>18</text>
							<text>关注的商品</text>
						</view>
						<view class="panel-item">
							<text>84</text>
							<text>足迹</text>
						</view>
					</view>
				</view>
				<!-- 第二个面板 -->
				<view class="panel-two">
					<view class="title">我的订单</view>
					<view class="panel-body">
						<!-- 面板主体中的 item 项 -->
						<view class="panel-item">
							<image src="/static/my-icons/icon1.png" class="icon"></image>
							<text>待付款</text>
						</view>
						<view class="panel-item">
							<image src="/static/my-icons/icon2.png" class="icon"></image>
							<text>待收货</text>
						</view>
						<view class="panel-item">
							<image src="/static/my-icons/icon3.png" class="icon"></image>
							<text>退款/退货</text>
						</view>
						<view class="panel-item">
							<image src="/static/my-icons/icon4.png" class="icon"></image>
							<text>全部订单</text>
						</view>
					</view>
				</view>
				<!-- 第三个面板 -->
				<view class="panel-three">
					<u-cell-group>
						<u-cell title="收货地址" :isLink="true" arrow-direction :border="false"></u-cell>
						<u-cell title="联系客服" :isLink="true" arrow-direction :border="false"></u-cell>
						<u-cell title="退出登录" :isLink="true" arrow-direction border @click="logout"></u-cell>
					</u-cell-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {
		mapMutations,
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		mixins: [badgeMix],
		data() {
			return {

			};
		},
		computed: {
			...mapState('m_user', ['userAddress', 'token', 'userInfo', 'redirectInfo']),
			...mapState('cart', ['cartList']),
			...mapGetters('m_user', ['addstr'])
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateUserToken', 'setUserAddress', 'updateRedirectInfo']),
			async getUserInfo(e) {
				// const res = await uni.$http.post('/api/public/v1/my/orders/create', {
				// 	order_price: 0.01,
				// 	consignee_addr: this.addstr,
				// 	goods: this.cartList.filter(x => x.goods_state).map(x => ({
				// 		goods_id: x.goods_id,
				// 		goods_number: x.goods_count,
				// 		goods_price: x.goods_price
				// 	}))
				// })

				uni.getUserProfile({
					desc: '开发者',
					success: async (data) => {
						if (data.errMsg !== 'getUserProfile:ok') uni.$showMsg('授权失败，请重新授权')
						this.updateUserInfo(data.userInfo)
						// 用户登录凭证
						const [err, success] = await uni.login()
						if (err || success.errMsg !== 'login:ok') return uni.$showMsg('登录失败！')
						// 入参备注无法通过登录信息获取token
						// const params = {
						// 	code: success.code,
						// 	encryptedData: data.encryptedData,
						// 	iv: data.iv,
						// 	rawData: data.rawData,
						// 	signature: data.signature
						// }
						// const {
						// 	data: res
						// } = await uni.$http.post('/api/public/v1/users/wxlogin', params)
						// console.log(res)
						// if (res.meta.status !== 200) return uni.$showMsg('登录失败!')
						uni.$showMsg('登录成功')
						this.updateUserToken(
							'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo'
						)
						console.log(this.redirectInfo)
						if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
							uni.switchTab({
								url: this.redirectInfo.from,
								complete: () => {
									this.updateRedirectInfo({})
								}
							})
						}
					},
					fail: function(data) {
						if (data.errMsg === 'getUserProfile:fail auth deny') uni.$showMsg('授权失败，请重新授权')
					}
				})
			},
			// 退出登录
			async logout() {
				const [error, success] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				});
				if (success && success.confirm) {
					this.updateUserInfo({});
					this.updateUserToken('');
					this.setUserAddress({});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.my-container {
		height: 100%;
		background-color: #f8f8f8;
	}

	.login-container /deep/ .u-line {
		border-bottom-width: 0px !important;
	}

	.no-login-container {
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 750rpx;
		background-color: #f8f8f8;

		&::after {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			content: "";
			width: 100%;
			height: 40px;
			;
			background-color: #FFFFFF;
			border-radius: 100%;
			transform: translateY(50%);
		}

		.login-btn {
			width: 90%;
			margin: 20px 0;
			background-color: #C00000;
			border-radius: 100px;
			color: #FFFFFF;
		}

		.tip {
			font-size: 12px;
			color: gray;
		}
	}

	.login-container {
		font-size: 12px;

		.header {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			text-align: center;
			height: 400rpx;
			background-color: #90EE90;

			image {
				width: 90px;
				height: 90px;
				border-radius: 50%;
				border: 2px solid #FFFFFF;
			}
		}

		.panel-list {
			position: relative;
			top: -10px;
			width: 100%;
			padding: 0 10px;
			box-sizing: border-box;

			.panel {
				background-color: #FFFFFF;
				padding: 10px;
				border-radius: 5px;

				.panel-body {
					display: flex;
					justify-content: space-between;


					.panel-item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.panel-two {
				background-color: #FFFFFF;
				margin-top: 10px;
				padding-bottom: 10px;
				border-radius: 5px;

				.title {
					font-size: 14px;
					margin-left: 10px;
				}

				.panel-body {
					display: flex;
					// justify-content: space-between;
					margin-top: 20px;

					.panel-item {
						display: flex;
						flex: 1;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						text-align: center;

						image {
							width: 40px;
							height: 40px;
						}
					}
				}
			}

			.panel-three {
				margin-top: 10px;
				border-radius: 5px;
				background-color: #FFFFFF;
			}
		}
	}
</style>
